const { graph } = this
// 基础节点
const r1 = graph.createNode({
  shape: 'flow-chart-rect',
  attrs: {
    body: {
      rx: 24,
      ry: 24,
    },
    text: {
      text: '起始节点',
    },
  },
})
const r2 = graph.createNode({
  shape: 'flow-chart-rect',
  attrs: {
    text: {
      text: '流程节点',
    },
  },
})
const r3 = graph.createNode({
  shape: 'flow-chart-rect',
  width: 52,
  height: 52,
  angle: 45,
  attrs: {
    'edit-text': {
      style: {
        transform: 'rotate(-45deg)',
      },
    },
    text: {
      text: '判断节点',
      transform: 'rotate(-45deg)',
    },
  },
  ports: {
    groups: {
      top: {
        position: {
          name: 'top',
          args: {
            dx: -26,
          },
        },
      },
      right: {
        position: {
          name: 'right',
          args: {
            dy: -26,
          },
        },
      },
      bottom: {
        position: {
          name: 'bottom',
          args: {
            dx: 26,
          },
        },
      },
      left: {
        position: {
          name: 'left',
          args: {
            dy: 26,
          },
        },
      },
    },
  },
})
const r4 = graph.createNode({
  shape: 'flow-chart-rect',
  width: 70,
  height: 70,
  attrs: {
    body: {
      rx: 35,
      ry: 35,
    },
    text: {
      text: '链接节点',
    },
  },
})
// 组合节点
const c1 = graph.createNode({
  shape: 'flow-chart-image-rect',
})
const c2 = graph.createNode({
  shape: 'flow-chart-title-rect',
})
const c3 = graph.createNode({
  shape: 'flow-chart-animate-text',
})
// 节点组
const g1 = graph.createNode({
  shape: 'groupNode',
  attrs: {
    text: {
      text: 'Group Name',
    },
  },
  data: {
    parent: true,
  },
})
// 系统设计图
const imgs = [
  {
    image: require('../assets/icon.png')
  },
  {
    image: require('../assets/icon.png')
  },
  {
    image: require('../assets/icon.png')
  },
  {
    image: require('../assets/icon.png')
  },
  {
    image: require('../assets/icon.png')
  },
  {
    image: require('../assets/icon.png')
  },
  {
    image: require('../assets/icon.png')
  },
  {
    image: require('../assets/icon.png')
  }
]
const imgNodes = imgs.map(item => {
  return graph.createNode({
    // shape: 'flow-chart-image-rect-custom',
    // attrs: {
    //   image: {
    //     'xlink:href': item.image,
    //   }
    // }
    shape: 'image', //可选值：Rect Circle Ellipse Polygon Polyline Path Image HTML TextBlock BorderedImage EmbeddedImage InscribedImage Cylinder
    imageUrl: item.image,
    attrs: {
      image: {
        // fill: 'yellow',
      },
    },
    width: 52,
    height: 52,
    ports: { ...customPorts }
  })
})
this.stencil.load([r1, r2, r3, r4], 'basic')
this.stencil.load(imgNodes, 'custom-image')
